<template>
    <div>
        <div>
            <van-button @click="showHandle" type="default">默认按钮</van-button>
            <van-popup position="bottom" v-model="show">
                <van-picker @confirm="onConfirm" @cancel="onCancel" show-toolbar :columns="columns" @change="onChange" />
            </van-popup>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                show: false,
                columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
            }
        },
        methods: {
            showHandle(){
                this.show = true;
            },
            onChange(picker, value, index) {
                this.$toast(`当前值：${value}, 当前索引：${index}`);
            },
            onConfirm(value, index) {
                let that = this;
                this.$toast(`当前值：${value}, 当前索引：${index}`);
                setTimeout(function () {
                    that.show = false;
                },1000)
            },
            onCancel() {
                let that = this;
                this.$toast('取消');
                setTimeout(function () {
                    that.show = false;
                },1000)
            }
        }
    }
</script>